<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper"  :autoplay="true" >
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="系统管理" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item v-for="(item, index) in menuList" :key="index">
          <view class="grid-item-box"  :class="{ 'active': activeIndex === index }"
            @click="onMenuClick(item, index)">
            <uni-icons :type="item.icon" size="30" :color="iconColor"  ></uni-icons>
            <text class="text" >{{ item.text }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      // 轮播图数据
      swiperList: [
        { image: '/static/swiper/sw0.jpg' },
        { image: '/static/swiper/sw1.jpg' },
        { image: '/static/swiper/sw2.jpg' },
        { image: '/static/swiper/sw3.jpg' },
        { image: '/static/swiper/sw4.jpg' }
      ],
      // 菜单数据 - 所有配置集中在这里！
      menuList: [
        { text: '交流群',     icon: 'weixin' ,url:''},
        { text: '角色管理',   icon: 'staff-filled' ,url:''},
        { text: '菜单管理',   icon: 'color' ,url:''},
        { text: '部门管理',   icon: 'settings-filled' ,url:''},
        { text: '岗位管理',   icon: 'chatboxes-filled' ,url:''},
        { text: '字典管理',   icon: 'bars' ,url:''},
        { text: '参数设置',   icon: 'gear-filled' ,url:''},
        { text: '通知公告',   icon: 'chat-filled' ,url:''},
        { text: '日志管理',   icon: 'wallet-filled' ,url:''}
      ],
	  // ✅ 记录当前激活项的索引
	   activeIndex: -1 ,// -1 表示无选中
	   iconColor: '#007AFF', // 🔵 iOS 风格蓝色，也可以用 'blue', '#409eff' 
	    active: '交流群', // 当前选中项
    }
  },
  methods: {
    // 轮播图点击
    clickBannerItem(item) {
      console.info('点击轮播图:', item)
    },
    // 轮播图切换
    changeSwiper(e) {
      this.current = e.detail.current
    },
    // 宫格点击（统一处理）
    onMenuClick(item,index) {
	  // 如果点击的是当前已激活项 → 取消选中（变回原色）
		if (this.activeIndex === index) {
			this.activeIndex = -1
		} else {
		// 否则 → 选中该项
			this.activeIndex = index
		}
      if (item.url!='') {
          uni.navigateTo({ url: item.url })
        } else {
          uni.showToast({ title: item.text, icon: 'none' })
        }
    },
    // 如果你还想保留 uni-grid 的 change 事件（可选）
    changeGrid(e) {
      // this.$modal.showToast('模块建设中~') // 原来的提示
    }
  }
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
  min-height: 100%;
  height: auto;
}
view {
  font-size: 14px;
  line-height: inherit;
}
/* #endif */


.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  /* 默认背景色 */
    background-color: #fff;
    /* 点击反馈 */
    transition: background-color 0.3s;
    cursor: pointer;
}

// ✅ 选中状态样式
.grid-item-box.active {
  background-color: #1e90ff !important; /* 蓝色 */
  /* 可选：文字变白 */
  color: #fff;
}

.grid-item-box.active .text {
  color: #fff;
}

.grid-item-box.active uni-icons {
  // 如果需要图标变色
  // 注意：uni-icons 颜色受父级 color 影响
}

.uni-margin-wrap {
  width: 100%;
}

.swiper-box {
  height: 190px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@font-face {
  /* 如果你用了 iconfont 可以保留，否则可删 */
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
  }
}


</style>